<template>
  <div ref="logcontent">
    <div class="card-container">
      <Form
        :model="logParams"
        ref="queryForm"
        :inline="true"
        label-width="120px"
      >
        <!-- layout="vertical" -->
        <Row :gutter="20" class="mb-[-26px]">
          <Col :span="5" :offset="0">
            <FormItem label="查询时间" name="date" label-width="80px">
              <DatePicker
                type="date"
                v-model:value="logParams.date"
                format="YYYY-MM-DD"
                :disabled-date="disabledDate"
              >
              </DatePicker>
            </FormItem>
          </Col>
          <!-- <Col :span="15" :offset="0">
            <FormItem label="系统日志分类" name="logtype">
              <CheckboxGroup v-model:value="logParams.logtype">
                <Checkbox
                  v-for="item in sysLogTypeOptions"
                  :label="item.label"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}</Checkbox
                >
              </CheckboxGroup>
            </FormItem>
          </Col> -->
          <Col :span="1" :offset="-1">
            <FormItem>
              <Button size="small" @click="logQuery">下载 </Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="card-container">
      <Row class="log-box" :gutter="10">
        <div v-if="logLoading" class="loading_box">
          <Spin tip="下载中..."></Spin>
        </div>
        <Textarea
          v-else
          class="log-border"
          disabled
          :autoSize="{ minRows: 10, maxRows: 19 }"
          v-model:value="logText"
        >
        </Textarea>
      </Row>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { nextTick, ref } from 'vue';
import {
  Button,
  Checkbox,
  CheckboxGroup,
  Col,
  DatePicker,
  Form,
  FormItem,
  Row,
  Spin,
  Textarea,
  message,
} from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
import { listToOption } from '@/utils/utils';
import { listToEnum } from '@/utils/utils';
import { downloadLogFile } from '@/api/device';
import { fetchDictsOfType } from '@/api/dict';
import { getDictType } from '@/api/monitor';
import { saveRecord } from '@/api/notice';

interface Props {
  pageData: any;
  logType: any;
}
const props = defineProps<Props>();

const typeEnum: any = ref();
const dictInit = () => {
  getDictType('device_operate_type').then((res) => {
    typeEnum.value = listToEnum(res.data as any, 'dictLabel', 'dictCode');
  });
};

dictInit();

const disabledDate = (date: Dayjs) => {
  return dayjs(Date.now()).isBefore(date);
};

const sysLogTypeOptions = ref<Global.Option[]>();
fetchDictsOfType(['sys_log_type']).then((res: any) => {
  const { sys_log_type } = res.data;
  sysLogTypeOptions.value = listToOption(
    sys_log_type,
    'dictLabel',
    'dictValue',
  );
});

// 日志查询按钮
const logParams = ref({
  date: dayjs(Date.now()),
  logtype: ['1', '2', '3', '4', '5', '6', '7'],
});
const logLoading = ref(false);
const logText = ref('');
const param = ref();
const logQuery = async () => {
  const newDate = dayjs(logParams.value.date).startOf('day').valueOf();
  let oneday = 1000 * 60 * 60 * 24;

  let time = Number(newDate) + oneday;
  if (logParams.value.logtype) {
    logLoading.value = true;
    let data = {
      code: props.pageData.code,
      startTime: Number(newDate),
      endTime: time,
      logType: props.logType,
    };
    const res = await downloadLogFile(data);
    saveRecordFn(
      props.pageData,
      res,
      '下载',
      JSON.stringify(data),
      '/file/downloadLogFile1',
    );
    if (res.code == 200) {
      logText.value = res.msg || '暂无日志信息';
      logLoading.value = false;
      nextTick(() => {
        setTimeout(() => {
          // param.value.scrollTop = logcontent.value.clientHeight;
        }, 13);
      });
    }
  } else {
    message.error('查询时间不能为空');
  }
};

const saveRecordFn = async (
  item: any,
  res: any,
  operateButton: any,
  requestParam: any,
  operateUri: string,
) => {
  const list = [
    {
      deviceCode: item.code,
      operateModule: '设备管理/设备总览/系统日志',
      requestParam,
      status: res.code == 200 ? 1 : 0,
      operateButton,
      operateType: typeEnum.value[operateButton],
      operateUri,
    },
  ];
  await saveRecord({ list });
};
</script>

<style lang="scss" scoped>
:deep(.log-border) {
  &.ant-input {
    border: transparent !important;
  }
}

.loading_box {
  min-height: 300px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  :deep(.ant-spin) {
    .ant-spin-dot-item {
      background: #fff;
    }
    .ant-spin-text {
      color: #fff;
    }
  }
}
</style>
